// xxx.vue
<template>
<button @click="addPwaBtn">pwa下载安装按钮</button>
</template>
<script lang="ts" setup>
import { ref,onMounted  } from "vue";
	const pwaIconShow =ref(false)
	const showAddTipsDialog =ref(false)
  const isIOS=()=>/(iPhone|iPad|iPod)/.test(navigator.userAgent)
  alert(`当前设备是${isIOS()?'苹果手机':'非苹果手机'}`)
	onMounted(() => {
	   // 因为beforeinstallprompt事件在ios上目前不支持，所以不需要判断是否是ios
	   // 这块，还有一篇，是否在pwa环境中的判断逻辑，可以看文章末尾的另一篇链接（http://t.csdnimg.cn/Kk6lM）
	   if (isIOS()) {
	     console.log('ios-显示按钮')
	     // 如果是苹果手机，页面的安装pwa按钮一直显示
	     pwaIconShow.value = true
	   } else {
	     pwaFunc()
	   }
	})
	// 注册pwa
	const pwaFunc = () => {
	  // 在主入口监听PWA注册事件,安装PWA时触发
	  window.addEventListener('beforeinstallprompt', e => {
	    // 没有安装pwa时，网站会进入这里、
	    // 安装pwa后，网站不会走这里，但是卸载后也会走这里
	    // 所以，只要走了这里，按钮就是显示的，默认按钮不显示即可
	    console.log('pwaFunc-显示按钮-显示按钮')
	   pwaIconShow.value = true
	    e.preventDefault()
	    window.deferredPrompt = e
	  })
	}
	// 用户点击pwa图标
	const addPwaBtn= () => {
	  if (isIOS()) {
	    // 如果是苹果手机，直接显示浏览器设置指引图
	    showAddTipsDialog.value = true
	  } else {
	    try {
	      window.deferredPrompt.prompt()
	      window.deferredPrompt.userChoice.then(choiceResult => {
	        if (choiceResult.outcome === 'accepted') {
	        	console.log('addDesktop-pwa用户安装了PWA——可打印---不显示按钮')
	        	pwaIconShow.value = false
	        } else {
	          console.log('用户拒绝安装PWA--可打印')
	        }
	        window.deferredPrompt = null
	      })
	    } catch {
	      console.log('error-pwa-不支持？不显示？')
	      pwaIconShow.value = false
	    }
	  }
	}
</script>
